<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1034 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M454.994 557.056c-127.652 0-231.424-103.762-231.424-231.424S327.342 94.208 454.994 94.208c127.662 0 231.424 103.762 231.424 231.424S582.656 557.056 454.994 557.056zm0-421.888c-105.124 0-190.464 85.33-190.464 190.464s85.34 190.464 190.464 190.464c105.134 0 190.464-85.33 190.464-190.464s-85.33-190.464-190.464-190.464zm-.338 794.624c-102.738 0-198.994-7.854-270.336-22.19-92.498-18.432-137.554-46.418-137.554-85.668 0-64.174 44.032-123.566 124.242-167.26 76.462-41.298 177.152-64.164 283.986-64.164 106.844 0 207.534 22.866 283.648 64.164 80.22 43.694 124.252 103.086 124.252 167.26 0 38.912-45.056 66.898-137.564 85.668-71.68 14.336-167.588 22.19-270.674 22.19zm.338-298.322c-100.004 0-193.874 21.156-264.192 59.392C124.59 727.04 87.726 773.458 87.726 821.934c0 6.82 18.77 28.324 104.786 45.394 68.946 13.65 162.13 21.504 262.482 21.504 100.352 0 193.536-7.506 262.492-21.504 86.016-17.07 104.786-38.574 104.786-45.394 0-48.476-36.526-94.894-102.738-131.072-70.656-38.236-164.526-59.392-264.54-59.392zM860.16 424.96a3.584 3.584 0 0 1-3.072-1.71l-24.576-44.708-44.718-24.576a3.584 3.584 0 0 1-1.7-3.072 3.584 3.584 0 0 1 1.7-3.072l44.718-24.576 24.576-44.718a3.533 3.533 0 0 1 6.144 0l24.576 44.718 44.718 24.576a3.584 3.584 0 0 1 1.7 3.072 3.584 3.584 0 0 1-1.7 3.072l-44.718 24.576-24.576 44.708a3.584 3.584 0 0 1-3.072 1.71zm65.536-140.974a3.584 3.584 0 0 1-3.072-1.7l-13.998-25.948-25.938-13.988a3.584 3.584 0 0 1-1.71-3.072 3.584 3.584 0 0 1 1.71-3.072l25.938-13.998 13.998-25.938a3.533 3.533 0 0 1 6.144 0l13.998 25.938 25.938 13.998a3.584 3.584 0 0 1 1.71 3.072 3.584 3.584 0 0 1-1.71 3.072l-25.938 13.988-13.998 25.948c-.686 1.024-2.048 1.7-3.072 1.7zm-135.854 21.852a3.584 3.584 0 0 1-3.072-1.71l-9.216-17.07-17.06-9.554a3.584 3.584 0 0 1-1.71-3.072 3.584 3.584 0 0 1 1.71-3.072l17.06-9.216 9.216-17.07a3.533 3.533 0 0 1 6.144 0l9.216 17.07 17.07 9.216a3.584 3.584 0 0 1 1.71 3.072 3.584 3.584 0 0 1-1.71 3.072l-17.07 9.554-9.216 17.07a3.584 3.584 0 0 1-3.072 1.71z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Iconc6 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
